<!--
 * @Descripttion: your project
 * @version: 1.0
 * @Author: hongweixun
 * @Date: 2022-07-12 14:51:16
 * @LastEditors: hongweixun
 * @LastEditTime: 2022-09-08 13:36:05
-->
<template>
  <div id="columnPlot" ref="sdf" style="height:100%;"></div>
</template>
<script>
import { Column } from '@antv/g2plot'
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['noticeList', 'dormitBool'])
  },
  data () {
    return {
      columnPlot: null,
      data: []
    }
  },
  watch: {
    noticeList: {
      handler: function (newValue, oldValue) {
        if (newValue !== oldValue && oldValue.length !== 0) {
          // this.columnPlot.destroy()
          // this.init()
          this.columnPlot.changeData(this.noticeList)
        }
      }
    }
  },
  methods: {
    init () {
      console.log(this.$refs.sdf.offsetHeight)
      const data = this.noticeList
      this.columnPlot = new Column('columnPlot', {
        data,
        xField: 'type',
        yField: 'value',
        columnWidthRatio: 0.3,
        height: this.$refs.sdf.offsetHeight - 30,
        color: '#02d8eb',
        label: {
          // 可手动配置 label 数据标签位置
          position: 'top', // 'top', 'bottom', 'middle',
          // 配置样式
          style: {
            fill: '#FFFFFF',
            opacity: 0.6
          }
        },
        xAxis: {
          tickLine: null,
          subTickLine: null,
          grid: {
            line: {
              style: {
                stroke: '#0D3B77',
                lineWidth: 1,
                lineDash: [4, 5],
                strokeOpacity: 0.4,
                shadowColor: '#0D3B77',
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                cursor: 'pointer'
              }
            }
          },
          label: {
            autoHide: true,
            autoRotate: false,
            style: {
              fill: '#7ba0d5'
            }
          },
          line: {
            style: {
              stroke: '#0D3B77',
              lineWidth: 1,
              lineDash: [2, 5],
              strokeOpacity: 0.4,
              shadowColor: '#0D3B77',
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              cursor: 'pointer'
            }
          }
        },
        yAxis: {
          tickLine: null,
          subTickLine: null,
          grid: {
            line: {
              style: {
                stroke: '#0D3B77',
                lineWidth: 1,
                lineDash: [2, 5],
                strokeOpacity: 0.4,
                shadowColor: '#0D3B77',
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                cursor: 'pointer'
              }
            }
          },
          label: {
            style: {
              fill: '#7ba0d5'
            }
          },
          line: {
            style: {
              stroke: '#0D3B77',
              lineWidth: 1,
              lineDash: [4, 5],
              strokeOpacity: 0.4,
              shadowColor: '#0D3B77',
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              cursor: 'pointer'
            }
          }
        },
        meta: {
          type: {
            alias: '名称'
          },
          value: {
            alias: '通报人数'
          }
        }
      })

      this.columnPlot.render()
    }
  },
  mounted () {
    this.$nextTick(() => {
      setTimeout(() => {
        if (this.noticeList) {
          this.init()
        }
      }, 500)
    })
  },
  created () {}
}
</script>
<style lang="less" scoped></style>
